<!--
 * @Description: 模糊搜索输入框
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2022-01-10 15:55:40
 * @LastEditTime: 2025-08-01 17:19:47
-->
<template>
  <el-input
    v-model="fuzzySearchWord"
    clearable
    :placeholder="placeholder"
    @input="inputChange"
  />
</template>

<script lang="ts" setup>
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ref, PropType } from "vue";
import { fuzzySearch } from "../../helpers";

// 组件名称（必要）
defineOptions({ name: "FyFuzzySearch" });

const props = defineProps({
  /**
   * 拷贝的列表，不会变化
   */
  copyData: {
    type: Object as PropType<Record<string, any>[]>,
    required: true,
  },
  placeholder: {
    type: String,
    default: "输入关键字搜索...",
  },
});

const filterData = defineModel({
  /**
   * 表格list数据（数组）
   */
  type: Object as PropType<Record<string, any>[]>,
  default: () => [],
});

const fuzzySearchWord = ref<string>("");

const inputChange = (val: string) => {
  filterData.value = fuzzySearch(props.copyData, val);
};
</script>
